<script src="<{$template_dir}>admin/js/echarts.js"></script>
<script src="<{$template_dir}>admin/js/china.js"></script>
<script src="<{$template_dir}>admin/js/china_map_data.js"></script>
<div id="content">
<div id="content-header">
  <div id="breadcrumb"> <a href="?m=admin&t=main" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 系统首页</a> <a href="index.php?m=admin&o=app&t=applist" class="current">应用列表</a> <a href="#" class="current">统计</a></div>
</div>
<div class="container-fluid">
  
  <div class="row-fluid" style="margin-top: -10px;">
    <div class="span12">
      
     
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
            <h5>设备分布<span></span></h5>
            <h5 style="margin-left:50%"><span>访问量</span></h5>
          </div>
          <div class="widget-content nopadding">
            <div id="mobile_type" style="height:400px; width:50%"></div>
            
			 <div id="time_log" style="height:400px;width:50%;    float: right; margin-top: -400px;"></div>
          </div>
        </div>
    
    	
    	<div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
            <h5>全国访问量统计</h5>
          </div>
          <div class="widget-content nopadding">
            <div id="main" style="height:600px;"></div>
            
			
       	  </div>
        </div>
    
  </div>
</div>
<!--机型分布饼图-->
<script>
var myChartMobile = echarts.init(document.getElementById('mobile_type'));
option_mobile = {
    title : {
        text: '访问设备类型',
        subtext: '总量：<{$all_num}>',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['Android','iPhone','iPad','PC']
    },
    series : [
        {
            name: '设备类型',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
				<{foreach from=$mobile_datas item=v}>
               	 {value:<{$v.num}>, name:'<{if !$v.mobile_system}>PC<{else}><{$v.mobile_system}><{/if}>'},
                
				<{/foreach}>
               
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChartMobile.setOption(option_mobile);

</script>

<!--访问波动图-->
<script>
var myChartTimelog = echarts.init(document.getElementById('time_log'));
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [];

<{foreach from=$time_arr item=v key=k}>
	
	date.push("<{$k}>")
	data.push(<{$v}>)
<{/foreach}>

console.log(date);
console.log(data);
option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    title: {
        left: 'center',
        text: '时间段访问量',
    },
    
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 50
    }, {
        start: 0,
        end: 50,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    series: [
        {
            name:'访问量',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: 'rgb(255, 70, 131)'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                }
            },
            data: data
        }
    ]
};

myChartTimelog.setOption(option);

</script>

<!--全国访问情况-->
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));

var data = [
	  <{foreach item=v from=$datas}>
      	{name: "<{$v.city}>", value: <{$v.num}>},
	  <{/foreach}>
];


var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option = {
    backgroundColor: '#404a59',
    title: {
        text: '全国访问量统计',
        subtext: '总量：<{$all_num}>\r\n\r\n未知城市数量：<{$unknow_city_num}>',
        
        x:'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ' : ' + params.value[2];
        }
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['访问量'],
        textStyle: {
            color: '#fff'
        }
    },
    visualMap: {
        min: 0,
        max: 200,
        calculable: true,
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        },
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111',
				show:true
            },
            emphasis: {
                areaColor: '#2a333d',
				show:true
            }
        }
    },
    series: [
        {
            name: '访问量',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: 12,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            }
        }
    ]
}

myChart.setOption(option);
    </script>